<template>
   <div class="content">
        <TableLayout form-title="">
            <div slot="form-title" class="table-title"></div>
            <el-form :model="formInline" class="formInline"  label-width="80px" slot="form">
                 <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="商品名称">
                             <el-input v-model="formInline.goodsName" placeholder="请输入商品名称"></el-input>
                        </el-form-item>
                    </el-col>
                     <el-col :span="8">
                        <el-form-item label="商品类型">
                          <el-select v-model="formInline.goodsType" placeholder="请选择商品类型" 
                          style="width:100%">
                                <el-option v-for="(item,index) in goodsTypeArr" 
                                :key="index" :label="item.typeName" 
                                :value="item.typeId"> </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                     <el-col :span="8">
                        <el-form-item label="商品状态">
                          <el-select v-model="formInline.goodsStatus" placeholder="请选择商品状态" 
                          style="width:100%">
                                <el-option v-for="(item,index) in goodsStatusArr" 
                                :key="index" :label="item.statusName" 
                                :value="item.statusId"> </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <div class="top-line">
                     <el-button type="primary" @click="submit">查询</el-button>
                </div>
            </el-form>
            <div class="table-title" slot="table-title">
                <div class="btnPosition">
                    <el-button @click="addInfor">添加</el-button>
                </div>
            </div>
            <el-table :data="AnnounceList" border style="width: 100%" ref="multipleTable" v-loading="loading"
             @sort-change="sortChange">
                <el-table-column align="center" label="商品名称"  min-width="130">
                     <template scope="scope">
                        <a @click="checkDetail(scope.row)" class="goDetailUpdate link-src">{{scope.row.productName}}</a>
                    </template>
                </el-table-column>
                  <el-table-column align="center" label="商品类型"  min-width="110">
                     <template scope="scope">
                        {{scope.row.type=='0'?'虚拟商品':scope.row.type=='1'?'勋章':scope.row.type=='2'?'实物商品':'--'}}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="积分" min-width="90">
                     <template scope="scope">
                      <span>{{scope.row.price?scope.row.price:'--'}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="现金"  min-width="70">
                     <template scope="scope">
                         <span>{{scope.row.cash==='null'?'--':scope.row.type=='0'?'--':scope.row.type=='1'?'--':scope.row.cash?scope.row.cash:'--'}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="售出总量" min-width="120" prop="maxCount">
                 <template scope="scope">
                      <span>{{scope.row.maxCount?scope.row.maxCount:'--'}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="库存数量" sortable="custom" min-width="120" prop="remainCount">
                     <template scope="scope">
                      <span>{{scope.row.remainCount?scope.row.remainCount:'--'}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="标签"  min-width="70">
                    <template scope="scope">
                        <span>{{scope.row.tag?scope.row.tag:'--'}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="创建时间" sortable="custom" min-width="170" prop="createTime">
                     <template scope="scope">
                      <span>{{scope.row.createTime?scope.row.createTime:'--'}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="状态" width="90">
                    <template scope="scope">
                        <span>{{scope.row.status=='0'?'下线':'上线'}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="170">
                    <template scope="scope">
                        <el-button type="text" class="btn-success"
                         @click="onlineOrDown(scope.row)">{{scope.row.status=='0'?'上线':'下线'}}
                        </el-button>
                         <el-button type="text" class="btn-success" v-if="scope.row.status=='0'"
                         @click="goDetailUpdate(scope.row)">编辑
                        </el-button>
                        <el-button type="text" class="btn-success"
                         @click="deleteListOne(scope.row)" v-if="scope.row.status=='0'">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-container" style="text-align:right">
                <el-pagination layout="total, sizes, prev, pager, next, jumper" 
                :total="listQuery.total" :current-page.sync="listQuery.page" 
                :page-sizes="config.pageSizes" :page-size="config.pageSize" 
                @size-change="handleSizeChange" @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </TableLayout>
    </div>
</template>
<script>
import { mapState, mapActions, mapGetters } from 'vuex';
import TableLayout from 'components/TableLayout';
import { queryGoodsList, onlineOrDown, deteleGoods} from 'api/creditShop';
import addGoods from './addGoods';

export default {
    name: 'goodsManageList',
    components: {TableLayout, addGoods},
    data() {
        return {
            formInline: {
                goodsName: '', // 商品名称
                goodsType: '', // 商品类型
                goodsStatus: ''// 商品状态
            },
            loading: true,
        //   商品类型
            goodsTypeArr: [
              {typeName: '全部', typeId: ''},
              {typeName: '虚拟商品', typeId: '0'},
              {typeName: '勋章', typeId: '1'},
              {typeName: '实物商品', typeId: '2'}
            ],
            goodsStatusArr: [
              {statusName: '全部', statusId: ''},
              {statusName: '下线', statusId: '0'},
              {statusName: '上线', statusId: '1'}
            ],
            AnnounceList: [],
            listQuery: {// 分页
                page: 1,
                total: 0
            },
            sequencingType: '', 
            sequencingStatus: ''

        }
    },
    watch: {// 局部刷新列表
        cacheUpdated(val) {
            val && this.searchFetchData();
        }
    },

    computed: {
        ...mapState({
            config: state => state.config.table,
            cacheUpdated: state => state.app.cacheUpdated// 局部刷新列表

        }),
        ...mapGetters([
            'uid'
        ])
    },
    created() {
        this.searchFetchData();
    }, 
    methods: {
          // 全局获取行数
        ...mapActions(['ChangePageSize']),
        // 查看 不可编辑
        checkDetail(row) {
            let id=row.id;
            let status='1';
            this.$router.push({path: `checkGoods/${id}/${status}`});
        },
        submit() {
            this.listQuery.page=1;
            this.searchFetchData();
        },
        sortChange({ column, prop, order }) {
            // "maxCount" "ascending"升序
            // "maxCount" "descending"降序
            // “sequencingType”: “排序类型 （0.售出数量 1.库存数量 2.创建时间）”,
            // “sequencingStatus”: “排序状态 (0.升序 1.降序)”
            // console.log(prop, order, '999')
            this.sequencingType=prop=='maxCount'?'0':prop=='remainCount'?'1':prop=='createTime'?'2':'';
            this.sequencingStatus=order=='ascending'?'0':order=='descending'?'1':'';
            this.searchFetchData(this.sequencingType, this.sequencingStatus)
        },
        // 点击商品，回填，可以编辑
        goDetailUpdate(row) {
            let id=row.id;
            let status='2';
            this.$router.push({path: `ediGoods/${id}/${status}`});
        },
        // 查询列表
        searchFetchData() {
            this.loading= true;
            let productName=this.formInline.goodsName;
            let status=this.formInline.goodsStatus;
            let type=this.formInline.goodsType;
            let page = this.listQuery.page;
            let rows = this.config.pageSize;
            let sequencingType=this.sequencingType;
            let sequencingStatus=this.sequencingStatus;
            queryGoodsList(productName, status, type, page, rows, sequencingType, sequencingStatus).then(res => {
                this.loading= false;
                this.AnnounceList = res.data.content.list;
                this.listQuery.total = parseInt(res.data.content.pagination.total);
            }).catch(() => {
                this.loading= false;
            });
        },
        // 添加按钮，添加信息
        addInfor() {
            this.$router.push({path: 'addGoods'});
        },
        // 删除按钮
        deleteListOne(row) {
            this.$confirm('确定删除？', ' ', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: ' ', // warning
                title: '  '
            }).then(() => {
                let id=row.id;
                this.detele(id);
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消操作'
                });
            });
        },
        // 下线还是上线 按钮
        onlineOrDown(row) {
            // status 0是下线，1是上线
            let id=row.id;
            let status=row.status;// 不做转换的发去
            let confirmMsg=status==0?'确定上线吗？':'确定下线吗？';
            let successMsg=status==0?'已上线！':'已下线！';
            this.$confirm(confirmMsg, ' ', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: ' ', // warning
                title: '  '
            }).then(() => {
                this.onlineOrDownline(id, status, successMsg);
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消操作'
                });
            });

        },
        // 上下线功能
        onlineOrDownline(id, status, successMsg) {
            onlineOrDown(id, status).then(res => {
                if (res.data.status==200) {
                    this.$message.success(successMsg);
                    this.searchFetchData();
                } else {
                    this.$message.error(res.data.errorMsg);
                }
            }).catch(() => {
                this.$message.error(res.data.errorMsg);
            })
        },
            // 删除功能
        detele(id) {
            deteleGoods(id).then(res => {
                if (res.data.status==200) {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.searchFetchData();
                } else {
                    this.$message.error(res.data.errorMsg);
                }
            });
        },
         // 分页
        handleSizeChange(val) {
            this.loading = true;
            this.listQuery.page = 1;
            this.ChangePageSize(val);
            this.searchFetchData();
        },

        handleCurrentChange(val) {
            this.loading = true;
            this.listQuery.page = val;
            this.searchFetchData();
        }
    }
}
</script>
<style lang="scss" scoped>
.content {
    position: relative;
    padding: 0px;
    $bgcolor:#fff;
    .goDetailUpdate{
         color:#37a1fb;
        
    }
}

</style>
